<template>
  <el-descriptions :column="3" size="default" border class="base-info-wrapper">
    <!-- 真实姓名 -->
    <el-descriptions-item :label="t('reviewApplyInfo.baseInfo.fields.realName')">
      <el-input
        v-model="formData.realName"
        :placeholder="t('common.inputText') + t('reviewApplyInfo.baseInfo.fields.realName')"
        :disabled="disabled"
      />
    </el-descriptions-item>
    <!-- 性别 -->
    <el-descriptions-item :label="t('reviewApplyInfo.baseInfo.fields.gender')">
      <el-select
        v-model="formData.gender"
        :placeholder="t('common.selectText') + t('reviewApplyInfo.baseInfo.fields.gender')"
        suffix-icon=""
        :show-arrow="false"
        :offset="0"
        :disabled="disabled"
      >
        <el-option :label="t('profile.user.man')" value="1" />
        <el-option :label="t('profile.user.woman')" value="2" />
      </el-select>
    </el-descriptions-item>
    <!-- 出生日期 -->
    <el-descriptions-item :label="t('reviewApplyInfo.baseInfo.fields.birthday')">
      <el-date-picker
        v-model="formData.birthday"
        type="date"
        :placeholder="t('common.selectText') + t('reviewApplyInfo.baseInfo.fields.birthday')"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        :disabled="disabled"
        :clearable="false"
        style="width: 100%"
      />
    </el-descriptions-item>
    <!-- 所在课题组 -->
    <el-descriptions-item :label="t('reviewApplyInfo.baseInfo.fields.researchGroup')">
      <el-input
        v-model="formData.researchGroup"
        :placeholder="t('common.inputText') + t('reviewApplyInfo.baseInfo.fields.researchGroup')"
        :disabled="disabled"
      />
    </el-descriptions-item>
    <!-- 办公电话 -->
    <el-descriptions-item :label="t('reviewApplyInfo.baseInfo.fields.workTel')">
      <el-input
        v-model="formData.workTel"
        :placeholder="t('common.inputText') + t('reviewApplyInfo.baseInfo.fields.workTel')"
        :disabled="disabled"
      />
    </el-descriptions-item>
    <!-- 邮箱 -->
    <el-descriptions-item :label="t('reviewApplyInfo.baseInfo.fields.email')">
      <el-input
        v-model="formData.email"
        :placeholder="t('common.inputText') + t('reviewApplyInfo.baseInfo.fields.email')"
        :disabled="disabled"
      />
    </el-descriptions-item>
    <!-- 手机 -->
    <el-descriptions-item :label="t('reviewApplyInfo.baseInfo.fields.phone')">
      <el-input
        v-model="formData.phone"
        :placeholder="t('common.inputText') + t('reviewApplyInfo.baseInfo.fields.phone')"
        :disabled="disabled"
      />
    </el-descriptions-item>
    <!-- 专业技术职务 -->
    <el-descriptions-item :label="t('reviewApplyInfo.baseInfo.fields.technicalPosition')">
      <el-input
        v-model="formData.technicalPosition"
        :placeholder="
          t('common.inputText') + t('reviewApplyInfo.baseInfo.fields.technicalPosition')
        "
        :disabled="disabled"
      />
    </el-descriptions-item>
    <!-- 招生专业 -->
    <el-descriptions-item :label="t('reviewApplyInfo.baseInfo.fields.enrollmentMajor')">
      <el-input
        v-model="formData.enrollmentMajor"
        :placeholder="t('common.inputText') + t('reviewApplyInfo.baseInfo.fields.enrollmentMajor')"
        :disabled="disabled"
      />
    </el-descriptions-item>
    <!-- 最高学位 -->
    <el-descriptions-item :label="t('reviewApplyInfo.baseInfo.fields.highestDegree')">
      <el-input
        v-model="formData.highestDegree"
        :placeholder="t('common.inputText') + t('reviewApplyInfo.baseInfo.fields.highestDegree')"
        :disabled="disabled"
      />
    </el-descriptions-item>
    <!-- 主要学术兼职 -->
    <el-descriptions-item :label="t('reviewApplyInfo.baseInfo.fields.mainAcademic')">
      <el-input
        v-model="formData.mainAcademic"
        :placeholder="t('common.inputText') + t('reviewApplyInfo.baseInfo.fields.mainAcademic')"
        :disabled="disabled"
      />
    </el-descriptions-item>
    <!-- 研究方向 -->
    <el-descriptions-item :label="t('reviewApplyInfo.baseInfo.fields.researchDirection')">
      <el-input
        v-model="formData.researchDirection"
        :placeholder="
          t('common.inputText') + t('reviewApplyInfo.baseInfo.fields.researchDirection')
        "
        :disabled="disabled"
      />
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { BaseInfoVO } from '@/api/recruit/reviewApply/types'

defineOptions({ name: 'BaseInfo' })

const props = withDefaults(
  defineProps<{
    data: BaseInfoVO
    disabled?: boolean
  }>(),
  {
    disabled: false
  }
)

const { t } = useI18n() // 国际化

const formData = ref<BaseInfoVO>({
  realName: '',
  gender: '1',
  birthday: '',
  researchGroup: '',
  workTel: '',
  email: '',
  phone: '',
  technicalPosition: '',
  enrollmentMajor: '',
  highestDegree: '',
  mainAcademic: '',
  researchDirection: ''
})

watch(
  () => props.data,
  () => {
    Object.assign(formData.value, props.data)
  },
  {
    immediate: true,
    deep: true
  }
)

defineExpose({
  formData
})
</script>

<style scoped lang="scss">
.base-info-wrapper {
  :deep(.el-input) {
    .el-input__wrapper {
      --el-disabled-text-color: #606266;
      --el-disabled-bg-color: #ffffff;
      box-shadow: none;
      border: none;
      padding: 0;
    }
  }

  :deep(.el-select) {
    .el-select__wrapper {
      --el-select-disabled-color: #606266;
      --el-fill-color-light: #ffffff;
      box-shadow: none;
      border: none;
      padding: 0;
    }
  }
}
</style>
